<template>
    <div class="cartcontrol">
        <transition name="fade">
        <div class="cart-decrease" v-show="food.count > 0" @click="decreaseCart">
                <span class="icon-remove_circle_outline inner"></span>
        </div>
        </transition>
        <div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart"></div>
    </div>
</template>
<script>
import Vue from "vue"
    export default{
        props:{
            food :{
                type: Object
            }
        },
        created(){
            console.log(this.food)
        },
        methods:{
            addCart(event) {
                if(!event._constructed){  
                    return;
                }
                if(!this.food.count){
                    Vue.set(this.food, 'count', 1)
                        // computedthis.food.count=1
                    }else{
                        this.food.count++ 
                    }
            },
            decreaseCart(event) {
                    if(!event._constructed){  
                        return;
                    }
                    if(this.food.count){
                        this.food.count--;
                    }
            }
        }
    }
</script>
<style lang="stylus">
.cartcontrol
    font-size:0
    .cart-decrease
        display: inline-block
        padding: 6px
        transition: all 0.4 linear
        .inner
            display: inline-block
            line-height: 24px
            font-size: 24px
            color:rgb(0 ,160 ,220)
    .cart-count
        display:inline-block
        vertical-align:top
        width: 12px
        padding-top: 6px
        line-height: 24px
        text-align:center
        font-size: 10px
        color:rgb(147 ,153 ,159)
    .cart-add
        display:inline-block
        line-height: 24px
        font-size: 24px
        padding: 6px
        color:rgb(0 ,160 ,220)
</style>
